<template>
  <!-- 客户 搜索 -->
  <div>
    <!-- 表单 -->
    <FormPanel ref="form" :cols="3" :list="list" :isSubmitBtn="false" @formChange="formChange"></FormPanel>
    <!-- 表格 -->
    <FilterTable
      ref="table"
      :columns="columns"
      columnsRef="partPartInventoryPartInventoryComponentsSearchCustomer"
      :fetchapi="fetchApi"
      :params="fetchParams"
      height="200"
      selectionType="single"
      :datakey="'rows'"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="arr => (this.onChangeColumn = arr)"
      :onPageChange="onPageChange"
      :onEnterEvent="onEnterEvent"
    ></FilterTable>
  </div>
</template>

<script>
export default {
  name: 'cgrkpartinfo',
  data() {
    return {
      list: this.createList(),
      columns: this.createColumns(),
      fetchApi: () => {},
      fetchParams: { xhrAbort: false }
    };
  },
  methods: {
    createList() {
      return [
        {
          type: 'INPUT',
          label: '客户代码',
          fieldName: 'ckdm'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          style: { minWidth: '300px' },
          fieldName: 'mpdm'
        },
        {
          type: 'INPUT',
          label: 'OEM下发',
          fieldName: 'pjdm'
        },
        {
          type: 'INPUT',
          label: '客户类别',
          fieldName: 'py'
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '序号',
          // sorter: true,
          width: 50,
          dataIndex: 'xuhao',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户代码',
          // sorter: true,
          dataIndex: 'xsj'
        }
      ];
    },
    formChange(p) {
      console.log('formChange', p);
    },
    onPageChange() {
      console.log('onPageChange');
    },
    onEnterEvent() {
      console.log('onEnterEvent');
    }
  }
};
</script>

<style></style>
